/*
 * @Description: 盒配置弹窗内容
 * @Author: Zzt
 * @Date: 2022-10-27 10:44:30
 * @LastEditTime: 2022-10-31 14:04:52
 */
import { Col, Form, Input, InputNumber, Row, Select } from 'antd';
import { toNumber } from 'lodash-es';
import { useEffect, useState } from 'react';

const { Option } = Select;
const BoxForm = (props: any) => {
  const { form, onFinish } = props;
  const [fileMaxPageCount, setFileMaxPageCount] = useState();
  const [spineWith, setSpineWith] = useState();

  // const onChangeNum = (value: any) => {
  //   console.log(typeof value);
  //   setFileMaxPageCount(value);
  // };
  // const onChangeWidth = (value: any) => {
  //   console.log(typeof value);
  //   setSpineWith(value);
  // };

  const unitSlector = (
    <Form.Item name="spineWithUnit" noStyle>
      <Select style={{ width: 70 }}>
        <Option value="mm">mm</Option>
        <Option value="cm">cm</Option>
      </Select>
    </Form.Item>
  );
  return (
    <Form
      form={form}
      onFinish={onFinish}
      labelCol={{ span: 5 }}
      wrapperCol={{ span: 19 }}
      labelAlign={'left'}
      initialValues={{ spineWithUnit: 'mm' }}
    >
      <Form.Item
        label="盒规格名称"
        extra={'盒规格显示名称，不能重复'}
        rules={[{ required: true }]}
        name={'name'}
      >
        <Input placeholder="请设置盒规则规格名称"></Input>
      </Form.Item>
      <Form.Item
        label="规格代码"
        extra={'规格标识，不能重复，建议用数据和字母组成'}
        rules={[{ required: true }]}
        name={'code'}
      >
        <Input placeholder="请填写规格代码" allowClear></Input>
      </Form.Item>
      <Form.Item label="脊背宽度" name={'spineWith'} rules={[{ required: true }]}>
        <InputNumber
          // value={spineWith}
          placeholder="请填写脊背宽度值，单位mm"
          controls={false}
          style={{ width: '98%' }}
          // onChange={onChangeWidth}
          addonAfter={unitSlector}
        ></InputNumber>
      </Form.Item>
      <Form.Item label="盒分页数" required extra="默认按A4纸大小计算">
        <Row>
          <Col span={19}>
            <Form.Item name={'fileMaxPageCount'} rules={[{ required: true }]} noStyle>
              <InputNumber
                // value={fileMaxPageCount}
                placeholder="一个盒内最大承载的页数"
                controls={false}
                style={{ width: '98%' }}
                // onChange={onChangeNum}
              ></InputNumber>
            </Form.Item>
          </Col>
          <Col span={5}>(单位：页)</Col>
        </Row>
      </Form.Item>
      <Form.Item label="备注" name={'remark'}>
        <Input.TextArea></Input.TextArea>
      </Form.Item>
    </Form>
  );
};
export default BoxForm;
